<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>

  *{
   margin:0;
   padding:0
  }

  </style>
</head>

<body>
  <div id ="box"> box
    <p>不凡</p>
    <span>学院</span>
  </div>


  <div id="box1">
    <p>不凡</p>
    <span>学院</span>
  </div>
</body>

  <script>
// 获取元素内容
// 1 innnerHTML ,2 innerText 也是dom的 属性
 var box = document.querySelector('#box');
 console.log(box.innerHTML); //获取的是被选元素所有内容 ,包括页面结构 带标签,,  赋值时  能识别标签
 console.log(box.innerText);//值获取文本信息.  赋值的时候 显示赋值的字符串

 //元素内容的赋值
 var pEl = '<p>我是p标签'
 box.innerHTML ='我是元素内容的赋值';
 box.innerHTML = pEl;

var box1 = document.querySelector('#box1');
//元素内容的赋值
box1.innerText ='我是box1元素内容的赋值';
box1.innerText = pEl;
  </script>
</html>